<template>
    <div class="colorSchemeCenter">
        <!-- 左侧导航栏 -->
        <div class="colorSchemeLeft">
            <div v-for="item in listData" :key="item.title">
                <h3 class="colorSchemeLeftTitle">{{ item.title }}</h3>
                <div v-for="child in item.children" :key="child.anchor" class="colorSchemeLeftItem">
                    <a href="javascript:void(0)" @click="scrollToAnchor(child.anchor)">
                        {{ child.name }}
                    </a>
                </div>
            </div>
        </div>
        <div class="colorSchemeRight">
            <!-- 经济学人配色方案 -->
            <div id="经济学人图表颜色规范" class="anchor-target">
                <ColorSpec :data="dataJJXR" />
            </div>
            <div id="华尔街日报图表颜色规范" class="anchor-target">
                <ColorSpec :data="dataWSJ" />
            </div>
            <div id="商业周刊图表颜色规范" class="anchor-target">
                <ColorSpec :data="dataBW" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ColorSpec from './components/ColorSpec.vue'
const listData = ref([
    {
        title: '商业图表配色',
        children: [
            {
                name: '经济学人图表颜色规范',
                anchor: '经济学人图表颜色规范'
            },
            {
                name: '华尔街日报图表颜色规范',
                anchor: '华尔街日报图表颜色规范'
            },
            {
                name: '商业周刊图表颜色规范',
                anchor: '商业周刊图表颜色规范'
            },
        ]
    },
])
const dataJJXR = ref({
    title: '经济学人图表颜色规范',
    subtitle: '整理/@泛希科技',
    colors: [
        { rgb: '93,145,167', hex: '#5D91A7' },
        { rgb: '0,81,108', hex: '#00516C' },
        { rgb: '0,164,220', hex: '#00A4DC' },
        { rgb: '107,207,246', hex: '#6BCFF6' },
        { rgb: '0,137,130', hex: '#008982' },
        { rgb: '109,187,191', hex: '#6DBBBF' },
        { rgb: '211,186,104', hex: '#d3ba68' },
        { rgb: '168,169,173', hex: '#A8A9AD' },
        { rgb: '213,105,93', hex: '#d5695d' },  // 红
        { rgb: '141, 196, 39', hex: '#8dc427' },
        { rgb: '64, 156, 28', hex: '#409c1c' },
        { rgb: '64, 156, 28', hex: '#9e4c7f' },

    ],
    background: {
        rgb: '205,221,230',
        hex: '#CDDDE6'
    },
    fillCombinations: [
        [2],
        [3, 2],
        [1, 2, 3],
        [1, 2, 3, 8],
        [2, 1, 4, 6, 5],
        [1, 2, 4, 3, 6, 5],
        [2, 3, 7, 9, 10, 5, 11, 12]
    ],
    footer: '泛科图表',
})
const dataWSJ = ref({
    title: '华尔街日报图表颜色规范',
    subtitle: '整理/@泛希科技',
    colors: [
        { rgb: '93,140,168', hex: '#5d8ca8' },  // 蓝
        { rgb: '213,105,93', hex: '#d5695d' },  // 红
        { rgb: '211,186,104', hex: '#d3ba68' }, // 棕黄
        { rgb: '190,156,46', hex: '#a8a6a7' },    // 灰
        { rgb: '89,167,127', hex: '#59a77f' },  // 绿
        { rgb: '207, 206, 207', hex: '#cfcecf' }, // 浅灰
        { rgb: '119, 80, 134', hex: '#775086' }, // 紫
        { rgb: '170, 133, 185', hex: '#aa85b9' }, // 浅紫
        { rgb: '170, 133, 185', hex: '#9fd5eb' }, // 浅蓝
        { rgb: '190,156,46', hex: '#be9c2e' },  // 深黄
    ],
    background: {
        rgb: '248,242,228',
        hex: '#f8f2e4'  // WSJ经典米白背景
    },
    fillCombinations: [
        [1],
        [1, 2],
        [1, 2, 3],
        [1, 2, 3, 4],
        [1, 2, 3, 4, 5],
        [1, 2, 3, 4, 5, 6],
        [1, 9, 7, 8, 2, 4, 6, 10, 3]
    ],
    footer: '泛科图表'
})
const dataBW = ref({
    title: '商业周刊图表颜色规范',
    subtitle: '整理/@泛希科技',
    colors: [
        { rgb: '61,131,198', hex: '#3d83c6' },     // 蓝色
        { rgb: '189,173,0', hex: '#bdad00' },      // 橄榄黄
        { rgb: '213,117,0', hex: '#d57500' },      // 橙色
        { rgb: '81,151,0', hex: '#519700' },       // 绿色
        { rgb: '206,61,0', hex: '#ce3d00' },       // 红色
        { rgb: '17,17,17', hex: '#111111' },       // 深灰色
        { rgb: '234,169,56', hex: '#eaa938' },     // 金色
        { rgb: '136,182,222', hex: '#88b6de' },    // 浅蓝色
        { rgb: '230,106,157', hex: '#e66a9d' },    // 粉色
        { rgb: '128,175,74', hex: '#80af4a' },     // 草绿色
    ],
    background: {
        rgb: '255,255,255',
        hex: '#ffffff'  // 白色背景
    },
    fillCombinations: [
        [1],
        [1, 2],
        [1, 2, 3],
        [1, 5, 4, 3],
        [1, 5, 4, 3, 2],
        [1, 5, 4, 3, 2, 6],
        [3, 7, 8, 1, 5, 9, 4, 10],
    ],
    footer: '泛科图表'
})
const scrollToAnchor = (id) => {
    const element = document.getElementById(id);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
    }
};

// 处理页面加载时的锚点跳转
onMounted(() => {
    if (window.location.hash) {
        const hash = window.location.hash.substring(1);
        setTimeout(() => {
            scrollToAnchor(hash);
        }, 100);
    }
});
</script>

<style lang="scss" scoped>
.colorSchemeCenter {
    width: 1200px;
    display: flex;
    margin: 0 auto;
    position: relative;

    .colorSchemeLeft {
        width: 210px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        font-weight: 700;
        // 粘性布局
        position: sticky;
        top: 0px;
        padding: 20px;

        .colorSchemeLeftTitle {
            padding: 5px 0;
            border-bottom: 3px solid #000;
        }

        .colorSchemeLeftItem {
            margin-left: 10px;
            font-weight: 300;
            padding-top: 5px;

            a {
                color: #333;
                text-decoration: none;

                &:hover {
                    color: #00516C;
                    text-decoration: underline;
                }
            }
        }
    }

    .colorSchemeRight {
        margin-left: 10px;
        flex: 1;

        >.anchor-target {
            margin-bottom: 30px;
            scroll-margin-top: 120px;
            /* 为锚点目标添加滚动边距 */
            &:nth-last-child(1) {
                margin-bottom: 10px;

            }
        }
    }
}

/* 全局平滑滚动 */
html {
    scroll-behavior: smooth;
}
</style>